// 保存首页概览-左边信息窗口各种交互状态

const defaultState = () => {
    // 默认情况下，左边信息窗显示，详情窗口隐藏，详情内容下的子项详情也隐藏
    return {
        // 点击的是高速公路还是子项的设施
        isRoad: true,
        // 公路/设施详情窗口整体是否显示
        roadDetailShow: false,
        // 公路/设施详情内容下的详情是否显示
        roadChildDetailShow: false,
        // 详情列表下当前选中的哪一项
        activeName: '0',
        // 用于查询列表详情，可能是id，或者number
        id: null,
        // 地图实例对象
        map: null,
        AMap: null,
        marker: null,
        labelsLayer: null,
        roadMarkers: [],
        roadLabelsLayer: null,
        clear: true
    }
}

const getters = {}

const mutations = {
    setIsRoad(state, isRoad) {
        state.isRoad = isRoad
    },
    setMap(state, obj) {
        state.map = obj.map
        state.AMap = obj.AMap
    },
    saveRoadMarkers(state, obj) {
        state.roadMarkers = obj.markers
        state.roadLabelsLayer = obj.labelsLayer
    },
    clearRoadMarkers(state) {
        if (state.roadMarkers.length > 0) {
            state.roadLabelsLayer.remove(state.roadMarkers)
            state.roadMarkers = []
        }
    },
    // 注意这里不要直接用marker单标记点，会导致地图比例尺变化时，定位是移动的
    addMarker(state, options) {
        const AMap = state.AMap
        const icon = {
            type: 'image',
            image: options.icon,
            size: [46, 58]
        }
        const labelMarker = new AMap.LabelMarker({
            icon,
            position: options.position
        })
        state.marker = labelMarker

        // 如果已经有了labelsLayer对象，直接添加标记
        // 如果没有，new一个添加标记
        if (state.labelsLayer) {
            state.labelsLayer.add(labelMarker)
        } else {
            const labelsLayer = new AMap.LabelsLayer({
                collision: false
            })
            labelsLayer.add(labelMarker)
            state.labelsLayer = labelsLayer
        }

        state.map.add(state.labelsLayer)
        state.map.setFitView(labelMarker, false, [150, 60, 100, 60])
    },
    clearMarker(state) {
        if (state.marker) {
            state.labelsLayer.remove(state.marker)
            state.marker = null
        }
    },
    showDetail(state) {
        state.roadDetailShow = true
    },
    hideDetail(state) {
        state.roadDetailShow = false
        // 隐藏时，把地图聚焦点设置到全图
        state.map && state.map.setFitView(null, false, [150, 60, 100, 60])
    },
    showChild(state, data) {
        state.roadChildDetailShow = true
        state.activeName = data.type
        state.id = data.id
        // 用作判断是不是从二级窗口进入详情，如果是返回时不清除公路上标记点
        state.clear = data.clear

        // 如果是直接点击地图标记点，dom获取不到
        // 获取二级窗口的实际高度，在二级隐藏，展示子项详情窗口时，子项最小高度设置为二级窗口高度，解决详情不能遮住二级窗口问题
        // 获取一级窗口和二级窗口的高度，如果能取到任意一个取最大值
        const dom1 = document.querySelector('#road-detail-panel')
        const dom2 = document.querySelector('#left-panel')
        const height1 = dom1 ? dom1.offsetHeight : 0
        const height2 = dom2 ? dom2.offsetHeight : 0
        if (height1 || height2) {
            const height = Math.max(height1, height2)
            document.querySelector('#child-detail-panel').style.minHeight = height + 'px'
        }
    },
    hideChild(state) {
        state.roadChildDetailShow = false
        state.id = null
        // 清除当前定位的标记点，并把视图切换到全图
        if (state.marker) {
            state.labelsLayer.remove(state.marker)
            state.marker = null
            // 如果路上有标记点，此时清空时聚焦到标记点上，如果没有，聚焦到全图
            const view = state.roadMarkers.length > 0 ? state.roadMarkers : null
            state.map.setFitView(view, false, [150, 60, 100, 60])
        }
    },
    resetState(state) {
        state.roadDetailShow = false
        state.roadChildDetailShow = false
    }
}

const actions = {}

export default {
    namespaced: true,
    state: defaultState(),
    getters,
    mutations,
    actions
}
